<template>
  <div class="title">
    <div style="height: 3px"></div>
    <ul class="price" v-if="tltle[0]">
      <li>
        <div>
          <span class="colors">￥</span
          ><span class="between colors"
            >{{ tltle[0].retailPrice }}-{{ tltle[0].counterPrice }}</span
          ><span class="colorst" v-if="tltle[1].floorPrice">最低价￥</span
          ><span class="colorst" v-if="tltle[1].floorPrice">{{
            tltle[1].floorPrice
          }}</span>
        </div>
      </li>
      <li>
        <div>
          <span class="label">{{ tltle[0].name }}</span
          ><span class="label" v-show="tltle[1].name">{{ tltle[1].name }}</span>
        </div>
        <div></div>
      </li>
      <li>
        <div>
          <span class="tltlie">{{ tltle[0].brief }} </span>
        </div>

        <span>月销 1000+</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "tltle",
  props: ["tltletext"],
  data() {
    return {
      show: "我是你兄弟啊",
      tltle: [],
    };
  },
  watch: {
    tltletext(val) {
      // console.log(val);
      this.$nextTick(() => {
        this.tltle = val;
        this.$forceUpdate()
      });

      // console.log(this.tltle);
    },
  },
  filters: {
    wordlimit: (res) => {
      if (!res) {
        return "";
      }
      if (res.length > 15) {
        return value.slice(0, 13) + "...";
      }
      return res;
    },
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.tltlie {
  color: @colst;
}
.colors {
  color: rgb(233, 74, 74);
}
.colorst {
  color: rgb(119, 119, 119);
}
.price {
  margin: 5px 8px 8px 8px;
  padding-bottom: 10px;
  color: @colst;
  .margin();
  li {
    display: flex;
    color: @colst;
    // border: 1px solid #000;
    &:nth-child(1) {
      // border: 1px solid #000;
      // span{

      //     // border: 1px solid #000;
      // }
      .between {
        font-size: 23px;
        margin-right: 5px;
        // color: @colst;
      }
    }
    &:nth-child(2) {
      margin-top: 10px;
      .label {
        &:nth-child(1) {
          margin-left: 0px;
        }
        margin-right: 3px;
        margin-left: 3px;
        padding-right: 3px;
        padding-left: 3px;

        padding-top: 3px;
        padding-bottom: 3px;
        color: rgb(240, 11, 11);
        background: rgba(228, 124, 124, 0.582);
      }
    }
    &:nth-child(3) {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .tltlie {
        font-size: 16px;
        color: @colst;
      }
      span {
        &:nth-child(2) {
          display: block;
          color: rgb(146, 146, 146);
        }
      }
    }
  }
}
</style>